<template>
	<view>
		<view>
			<u-overlay :show="showImg" @click="showImg=false">
				<view class="warp br08">
					<u--image width="100%" height="100%" radius="8" showMenuByLongpress :src="canvasImg" showLoading
						lazyLoad mode="widthFix"></u--image>
					<view class="wlkflex justify-around mt20">
						<view class="canvas-btn">
							<u-button @click="showImg=false" :customStyle="{color:'#999'}" color="#FFFFFF"
								shape="circle" text="取消"></u-button>
						</view>
						<view class="canvas-btn" @click.stop="saveImg">
							<u-button :color="themeColor" shape="circle" text="保存图片"></u-button>
						</view>
					</view>
				</view>
			</u-overlay>
			<l-painter ref="painter" hidden useCORS />
		</view>
	</view>
</template>

<script>
	import {
		saveTempFilePathImg
	} from '@/wlkutils/tools';
	import {
		mapGetters
	} from 'vuex';
	export default {
		computed: {
			...mapGetters(['userInfo', 'themeColor', 'images'])
		},
		name: "wlk-poster",
		data() {
			return {
				poster: {
					css: {
						width: "750rpx",
						borderRadius: "16rpx",

					},
					views: [{
						type: "view",
						css: {
							height: "1400rpx",
							width: "100%",
							backgroundImage: ""
						},
					}]
				},
				avatar: {
					src: '', //头像
					type: 'image',
					css: {
						background: "#fff",
						objectFit: "cover",
						width: "140rpx",
						boxSizing: "border-box",
						height: "140rpx",
						borderRadius: "50%",
						position: 'absolute',
						bottom: '530rpx',
						left: '40.8%'
					}
				},
				avatarInfo: {
					type: "view",
					css: {
						position: 'absolute',
						bottom: '460rpx',
						width: "100%",
						textAlign: "center"
					},
					views: [{
						text: "", //会员昵称
						type: "text",
						css: {
							display: "block",
							paddingBottom: "10rpx",
							color: "#333",
							fontSize: "38rpx",
							fontWeight: "bold"
						}
					}],
				},
				qrcodeInfo: {
					type: "view",
					css: {
						position: 'absolute',
						bottom: '164rpx',
						width: "100%",
						textAlign: "center"
					},
					views: []
				},
				canvasImg: '',
				showImg: false
			};
		},
		//属性
		props: {
			posterImg: {
				type: String,
				default: ''
			},
			mode: {
				type: String,
				default: ''
			},
			qrcode: {
				type: String,
				default: ''
			},
		},
		watch: {
			qrcode(val) {
				let obj = new Object();
				// #ifndef MP
				obj.text = val;
				obj.type = 'qrcode';
				// #endif
				// #ifdef MP
				obj.type = 'image';
				obj.src = val;
				// #endif
				obj.css = {
					width: "220rpx",
					height: "220rpx",
				};
				this.qrcodeInfo.views[0] = obj;
			},
		},
		methods: {
			canvas() {
				var that = this;
				this.$store.commit("setLoadingShow", true);
				this.avatar.src = this.userInfo.avatar ? this.userInfo.avatar : '';
				this.avatarInfo.views[0].text = this.userInfo.nickname;
				this.poster.views[1] = this.avatar;
				this.poster.views[2] = this.avatarInfo;
				this.poster.views[3] = this.qrcodeInfo;
				this.poster.views[0].css.backgroundImage = 'url(' + this.images.poster + ')';
				// 渲染
				this.$refs.painter.render(this.poster);
				// 生成图片
				let pathType = 'url';
				// #ifdef H5
				pathType = 'base64';
				// #endif
				this.$refs.painter.canvasToTempFilePathSync({
					fileType: "jpg",
					// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
					pathType: pathType,
					quality: 1,
					success: (res) => {
						console.log(res)
						that.canvasImg = res.tempFilePath;
						that.showImg = true;
						that.$store.commit("setLoadingShow", false);
					}
				});
			},
			saveImg() {
				saveTempFilePathImg(this.canvasImg);
			}
		}
	}
</script>

<style lang="scss">
	.warp {
		margin: 0 auto;
		margin-top: 130rpx;
		width: 90%;
		overflow: hidden;

		image {
			width: 100%;
			border-radius: 8px;
		}

		.canvas-btn {
			width: 35%;
		}
	}
</style>